<template>
	<ul>
		<li :class="[index == 1 ? 'active' : '']" @click="openModal('wachtQuote', 1)">
			<div class="icon"><i class="iconfont icon-weixin"></i></div>
			<div class="title">微信报价</div>
		</li>
		<li :class="[index == 2 ? 'active' : '']" @click="index = 2">
			<a href="http://dct.zoosnet.net/lr/chatpre.aspx?id=dct20072801&amp;lng=cn&amp;r=&amp;rf1=&amp;rf2=&amp;p=http%3A//www.mumway.com/&amp;cid=1535073775253540696259&amp;sid=1535073775253540696259">
				<div class="icon"><i class="iconfont icon-kefu"></i></div>
				<div class="title">在线报价</div>

			</a>
		</li>
		<li :class="[index == 3 ? 'active' : '']" @click="openModal('callQuote', 3)">
			<div class="icon"><i class="iconfont icon-iconmobile"></i></div>
			<div class="title">电话报价</div>
		</li>
	</ul>
</template>
<script>
	export default{
		name:'navCn',
		data(){
			return{
				index:1
			}
		},
		methods:{
			openModal(string, number){
				this.index = number
				this.$emit('input', string);
			}
		},
	}
</script>
<style scoped lang="scss">
@import '@/assets/utils/utils.scss';
@-webkit-keyframes bounceout{
	0%{-webkit-transform:scale(1);}
	25%{-webkit-transform:scale(0.95);}
	50%{-webkit-transform:scale(1.1);}
	100%{-webkit-transform:scale(1);}
}

@keyframes bounceout{
	0%{transform:scale(1);}
	25%{transform:scale(0.95);}
	50%{transform:scale(1.1);}
	100%{transform:scale(1);}
}
ul{
	position: fixed;
	bottom:0;
	right:0;
	left:0;
	width: 100%;
	height: 110px;
	border-top:1px solid $themeColor;
	text-align: center;
	background-color: #fff;
	z-index: 99;
	>li{
		width: 33.33%;
		float: left;
		height: 100%;
		color: #666;
		padding-top:10px;
		@include clearfloat;
		.icon{
			height: 60px;
			line-height: 60px;
			i{
				font-size: 40px;
			}
		}
		.title{
			font-size: 28px;
			line-height: 30px;
		}

	}
	>li.active{
		color: $themeColor;

		.icon{
			animation:bounceout 1s infinite;
			-webkit-animation:bounceout 1s infinite;

		}
	}
}
</style>